<template>
    <div id="app">
        <div class="left">
            <div class="top">
                <h1>列表</h1>
                <div>
                    <span @click="show=true">新增</span>
                    <ul v-show="show">
                        <li @click="add(ind)" v-for="(item,ind) in type" :key="ind">{{item.type}}</li>
                    </ul>
                </div>
            </div>
            <ul class="list">
                <li>
                    <span>类型</span>
                    <span>账号</span>
                    <span>提示</span>
                    <span>删除</span>
                </li>
                <li v-for="(item,ind) in addList" :key="ind">
                    <span>{{item.type}}</span>
                    <span>{{item.num}}</span>
                    <span>
                        <input type="text" :value="item.tip">
                    </span>
                    <span>
                        <button>删除</button>
                    </span>
                </li>
            </ul>
        </div>
        
        <div class="right">
            <div v-for="(item,ind) in addList" :key="ind">
                <span>{{item.icon}}</span>
                <span>{{item.bgColor}}</span>
            </div>
        </div>
    </div>
</template>

<script>

import axios from 'axios'

export default {
    name: 'App',
    components: {
       
    },
    data(){
        return {
            type:[],
            show:false,
            addList:[]  //添加的数组
        }
    },
    created(){
        axios.get('/api/type').then((res) => {
            if(res.data.code === 1){
                this.type = res.data.data;
            }
        })
    },
    methods:{
        add(index){
            this.show = false;

            this.addList.push(this.type[index])
        }
    }
}
</script>

<style lang="scss">
    html,body{
        width:100%;
        height: 100%;
        overflow: hidden;
    }
    #app{
        width:100%;
        height: 100%;
        overflow: scroll; 
    }
    
</style>
